import { Tree } from "antd";
import { useEffect, useState, type Key } from "react";
import { apiDepartmentsTree } from "~/api";
import Title from "~/components/ui/title";
import DepartmentModal from "~/routes/department/department-modal";
import type { IDepartment } from "~/types/manage/system/user";
import { cn } from "~/utils/ui.util";
import TreeTitleRender from "./tree.title";

interface Props {
  onSelectDepartment: (departmentId: number) => void;
}

export default function Department(props: Props) {
  const [departmentList, setDepartmentList] = useState<IDepartment[]>([]);
  const [selectTreeKeys, setSelectTreeKeys] = useState<Key[]>([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [editDepartment, setEditDepartment] = useState<IDepartment | null>(
    null,
  );
  const [addDepartmentId, setAddDepartmentId] = useState<number>(0);

  const _handler = {
    onCancel: () => {
      setEditDepartment(null);
      setModalVisible(false);
    },
    onOk: () => {
      setModalVisible(false);
      _fetch.init();
    },
    addDepartment: async (record?: IDepartment) => {
      setAddDepartmentId(record?.id || 0);
      setEditDepartment(null);
      setModalVisible(true);
    },
    editDepartment: async (record: IDepartment) => {
      setAddDepartmentId(record.parentId);
      setEditDepartment(record);
      setModalVisible(true);
    },
  };

  const _fetch = {
    init: async () => {
      const resp = await apiDepartmentsTree();
      // 默认选中第一个
      const selectedKeys = [resp[0].id];
      setSelectTreeKeys(selectedKeys);
      props.onSelectDepartment?.(selectedKeys[0] as number);
      setDepartmentList(resp);
    },
  };

  useEffect(() => {
    _fetch.init();
  }, []);

  return (
    <>
      <Title title="部门" />
      <Tree
        blockNode
        className={cn(
          "rp-[.ant-tree-node-content-wrapper]:!px-0 overflow-hidden [&_.ant-tree-node-content-wrapper]:overflow-hidden [&_.ant-tree-switcher]:!flex [&_.ant-tree-switcher]:!items-center [&_.ant-tree-switcher]:!justify-center [&_.ant-tree-switcher]:before:!hidden",
          "overflow-auto [&_.ant-tree-node-content-wrapper]:hover:!bg-transparent [&_.ant-tree-node-content-wrapper.ant-tree-node-selected]:!bg-inherit",
        )}
        titleRender={(node) => {
          return (
            <TreeTitleRender
              node={node}
              selectTreeKeys={selectTreeKeys}
              onAdd={_handler.addDepartment}
              onEdit={_handler.editDepartment}
              onDelete={(departmentId) => {}}
            />
          );
        }}
        treeData={departmentList}
        selectedKeys={selectTreeKeys}
        onSelect={(selectedKeys) => {
          setSelectTreeKeys(selectedKeys);
          selectedKeys &&
            selectedKeys.length > 0 &&
            props.onSelectDepartment(selectedKeys[0] as number);
        }}
      />
      <DepartmentModal
        visible={modalVisible}
        defaultParentId={addDepartmentId}
        department={editDepartment}
        onOk={_handler.onOk}
        onCancel={_handler.onCancel}
      />
    </>
  );
}
